<template>
  <div>
    <h1>商品列表</h1>
    <el-button type="primary" @click="$router.push('/add')">添加商品</el-button>

    <el-table :data="goodList" border style="width: 100%">
      <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
      <el-table-column prop="goods_price" label="商品价格"> </el-table-column>
      <el-table-column prop="goods_weight" label="商品重量"> </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.add_time | filtime }}
          <!-- 这个时间是1970年到现在的秒数 所以在用的时候*1000 变成毫秒数 -->
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- total现在一共多少条数据 -->
    <!-- :page-sizes 每页可选择的条数 -->
    <!-- layout 这个分页器有哪些功能 -->
    <!-- :page-size 当前每页多少条 -->
    <!-- :current-page当前是第几页 -->
    <!-- @size-change="handleSizeChange" 点击选择每页多少条的时候触发 -->
    <!-- @current-change="handleCurrentChange" 切换页码的时候触发 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      params: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      //请求商品列表的参数
      goodList: [],
      //   商品列表数据
      total: 0,
    };
  },
  methods: {
    getGoodList() {
      this.$axios.get("/goods", { params: this.params }).then((res) => {
        console.log(res);
        this.goodList = res.data.data.goods;
        this.total = res.data.data.total;
      });
    },

    handleSizeChange(val) {
      //   console.log(val);
      this.params.pagesize = val;
      this.getGoodList();
    },

    handleCurrentChange(val) {
      console.log(val);
      this.params.pagenum = val;
      this.getGoodList();
    },
  },
  created() {
    this.getGoodList();
  },
  filters: {
    filtime(val) {
      let time = new Date(val * 1000);
      //把一个时间戳（1970到现在的毫秒数传进来 就能得到一个时间对象）
      let year = time.getFullYear();
      let month = String(time.getMonth() + 1).padStart(2, "0");
      let day = (time.getDate() + "").padStart(2, "0");
      let h = (time.getHours() + "").padStart(2, "0");
      let m = (time.getMinutes() + "").padStart(2, "0");
      let s = (time.getSeconds() + "").padStart(2, "0");
      return `${year}-${month}-${day} ${h}:${m}:${s}`;
    },
  },
};
</script>
